<template>
  <div class="company">
    <div class="Row_content">
      <Form ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="80"
            style="width:600px;margin:auto;margin-top:100px">
        <FormItem label="商户名称:"
                  prop="merchantName">
          <Input v-model="formValidate.merchantName"
                 placeholder="最大支持输入100个字"
                 :maxlength="100"
                 class="Row_content_input"
                 :disabled="showupdate"></Input>
        </FormItem>
        <FormItem label="有效期:"
                  prop="indate">
          <Input v-model="formValidate.indate"
                 class="Row_content_input"
                 disabled></Input>
        </FormItem>
        <FormItem label="联系电话:"
                  prop="contactNumber">
          <Input v-model="formValidate.contactNumber"
                 :maxlength="20"
                 class="Row_content_input"
                 :disabled="showupdate"></Input>
        </FormItem>
        <FormItem label="系统名称:"
                  prop="systemName">
          <Input v-model="formValidate.systemName"
                 placeholder="最大支持输入100个字"
                 :maxlength="100"
                 class="Row_content_input"
                 :disabled="showupdate"></Input>
        </FormItem>

        <!-- <FormItem label="公司LOGO:"
                  prop="XTname">
          <div class="company-demo-upload-list"
               v-for="(item,index) in uploadList"
               :key="index">
            <template v-if="item.status === 'finished'">
              <img :src="item.url">
              <div class="company-demo-upload-list-cover">
                <Icon type="ios-eye-outline"
                      @click.native="handleView(item.name)"></Icon>
                <Icon type="ios-trash-outline"
                      @click.native="handleRemove(item)"></Icon>
              </div>
            </template>
            <template v-else>
              <Progress v-if="item.showProgress"
                        :percent="item.percentage"
                        hide-info></Progress>
            </template>
          </div>
          <Upload ref="upload"
                  :show-upload-list="false"
                  :default-file-list="defaultList"
                  :on-success="handleSuccess"
                  :format="['jpg','jpeg','png']"
                  :max-size="2048"
                  :on-format-error="handleFormatError"
                  :on-exceeded-size="handleMaxSize"
                  :before-upload="handleBeforeUpload"
                  multiple
                  type="drag"
                  action="//jsonplaceholder.typicode.com/posts/"
                  style="display: inline-block;width:96px;height:96px;vertical-align: top;">
            <div style="width: 58px;height:58px;line-height: 58px;">
              <Icon type="ios-camera"
                    size="20"></Icon>
            </div>
          </Upload>
          <Modal title="View Image"
                 v-model="visible">
            <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'"
                 v-if="visible"
                 style="width: 100%">
          </Modal>
        </FormItem> -->
        <FormItem v-show="!showupdate"
                  label="公司LOGO:"
                  prop="icon"
                  class="set-company-up">
          <Upload ref="upload"
                  :format="['jpg','png']"
                  :max-size="100"
                  :on-success="handleSuccess"
                  type="drag"
                  :show-upload-list="false"
                  :action="$config.uploadImg"
                  style="display: inline-block;width:96px;">
            <img :src="formValidate.icon?formValidate.icon:defaultUrl"
                 style="display: inline-block;width:96px;height:96px;vertical-align: top;"
                 alt="">
            <p class="replace_tit">更换</p>
          </Upload>
          <div style="width:132px;height:72px;line-height:18px;color: #464C5B;margin-left:24px;">支持格式：.jpg、.png规格：120*120大小：≤10KB</div>
        </FormItem>
        <FormItem v-show="showupdate"
                  label="公司LOGO:">
          <img :src="formValidate.icon?formValidate.icon:defaultUrl"
               style="display: inline-block;width:96px;height:96px;vertical-align: top;"
               alt="">
        </FormItem>
        <!-- <FormItem class="form-btn"
                  v-if="showupdate">
          <Button @click="upt"
                  class="system-submit-btn" v-if="hasPermission('moms:merchant:update')">编辑</Button>
        </FormItem> -->
        <FormItem class="form-btn"
                  v-if="!showupdate">
          <Button type="primary"
                  class="system-submit-btn"
                  @click="handleSubmit('formValidate')">确定</Button>
          <Button @click="handleReset('formValidate')"
                  class="system-submit-btn"
                  style="margin-left: 8px">取消</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script>
import { routeEqual } from '@/libs/util'
import { getMerchantInfo, updateMerchantInfo } from '@/api/system/memchart'
export default {
  data () {
    return {
      showupdate: true,
      defaultUrl: require('@/assets/images/logo-min.png'),
      formValidate: {
        merchantName: '',
        indate: '',
        contactNumber: '',
        systemName: '',
        icon: ''
      },
      ruleValidate: {
        merchantName: [
          {
            required: true,
            message: '单位名称不能为空',
            trigger: 'blur'
          }
        ],
        indate: [
          {
            required: true,
            message: 'The name cannot be empty',
            trigger: 'blur'
          }
        ],
        contactNumber: [
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (!value) {
                callback()
                return
              }
              if (!/^0\d{2,3}-?\d{7,8}$/.test(value) && !/^1[3|4|5|8][0-9]\d{4,8}$/.test(value)) {
                callback(new Error('号码格式错误'))
                return
              }
              callback()
            }
          }
        ]
      },
      imgName: '',
      visible: false,
      uploadList: []
    }
  },
  computed: {},
  created () { },
  mounted () {
    this.uploadList = this.$refs.upload.fileList
    this.getInfo()
  },
  methods: {
    closeModal () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
    },
    upt () {
      this.showupdate = false
    },
    handleSubmit (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          updateMerchantInfo({
            id: this.$store.state.user.merchantId,
            merchantName: this.formValidate.merchantName,
            contactNumber: this.formValidate.contactNumber,
            systemName: this.formValidate.systemName,
            icon: this.formValidate.icon
          }).then(res => {
            if (res.data.status === 200) {
              this.$Message.success('修改成功')
              this.showupdate = true
              this.getInfo()
            } else {
              this.$Message.error(`${res.data.error}`)
            }
          })
        }
      })
    },
    // 获取单位信息
    getInfo () {
      getMerchantInfo({
        id: this.$store.state.user.merchantId
      }).then(res => {
        if (res.data.status === 200) {
          this.formValidate = {
            merchantName: res.data.data.merchantName,
            indate: res.data.data.startDate + '-' + res.data.data.endDate,
            contactNumber: res.data.data.contactNumber,
            systemName: res.data.data.systemName,
            icon: res.data.data.icon
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    handleReset (name) {
      this.showupdate = true
      this.$refs[name].resetFields()
      this.closeModal()
    },
    handleSuccess (res, file) {
      this.formValidate.icon = res.full_img_url
    }
  }
}
</script>
<style lang="less">
.company {
  .ivu-upload {
    width: 96px;
    height: 96px;
    position: relative;
    border: 0;
    .replace_tit {
      position: absolute;
      bottom: 0;
      width: 96px;
      opacity: 0.6;
      background: #2d8cf0;
      height: 24px;
      text-align: center;
      line-height: 24px;
      font-size: 12px;
      color: #ffffff;
      display: none;
    }
  }
  .ivu-upload:hover .replace_tit {
    display: block;
  }
}
</style>
<style>
.set-company-up .ivu-form-item-content {
  display: flex;
}
.set-company-up .ivu-form-item-label::before {
  display: none;
}
.company-demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.company-demo-upload-list img {
  width: 100%;
  height: 100%;
}
.company-demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.company-demo-upload-list:hover .company-demo-upload-list-cover {
  display: block;
}
.company-demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
